<!DOCTYPE html>

<html class="no-js">
<!-- sdf -->

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.11/index.js"></script>
  <script src="https://cdn.staticfile.org/echarts/4.2.1-rc1/echarts.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.11/theme-chalk/index.css" />
  <link rel="stylesheet" href="../../../lib/index.css" />
  <script src="../../lib/avue.js"></script>

</head>

<body>
  <div id="app">
    <avue-echart-radar :option="option" :data="data">
    </avue-echart-radar>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        data: {
          indicator: [{
              name: '销售',
              max: 6500
            },
            {
              name: '管理',
              max: 16000
            },
            {
              name: '信息技术',
              max: 30000
            },
            {
              name: '客服',
              max: 38000
            },
            {
              name: '研发',
              max: 52000
            },
            {
              name: '市场',
              max: 25000
            }
          ],
          series: [{
            data: [{
                value: [4300, 10000, 28000, 35000, 50000, 19000],
                name: '预算分配（Allocated Budget）'
              },
              {
                value: [5000, 14000, 28000, 31000, 42000, 21000],
                name: '实际开销（Actual Spending）'
              }
            ]
          }]
        },
        option: {
          width: '100%',
          height: 600,
          titleShow: true,
          title: '各部门开销',
          subtext: '最近一个月',
          titleColor: '#666',
          tipBackgroundColor: 'rgba(50,50,50,0.7)',
          tipColor: "#fff",
          shape: 'polygon',
          radius: "75%",
          splitNumber: 4,
          radarNameColor: '#333',
          radarNameSize: 18,
          titleFontSize: 18,
          areaOpacity: 0.3,
          legend: true,
          // labelShow: true,
          "barColor": [{
              "color1": "#564AA3",
            },
            {
              "color1": "#188df0",
            }
          ]
        },
      }
    }

  })

</script>

</html>
